<template>
    <el-row class="tac">
        <el-col>
            <h5 class="mb-2">菜单</h5>
            <el-menu class="menu" @select="handlerSelect">
                <el-sub-menu v-for="menu in menus" :index="String(menu.id)">
                    <template #title>
                        <span>{{menu.label}}</span>
                    </template>
                    <el-menu-item v-for="subMenu in menu.children" :index="String(subMenu.id)">
                        <span>{{subMenu.label}}</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
import { onMounted, ref } from "vue";
import axios from 'axios';
export default {

    setup() {
        const count = ref(0)
        const menus = ref([])
        onMounted(function () {
            axios.get("http://localhost:8081/allMenus").then((response) => {
                console.log(response);
                menus.value = response.data;
            }).catch((error) => {
                console.log(error);
            });
        })
        return {
            menus
        }
    },
    mounted() {

    },methods: {
        handlerSelect(id) {
            this.$emit('menuClick', id)
        }
    }
}
</script>

<style scoped></style>